<script setup lang="ts">
import type { ContentCategoryTreeResult } from '#/api/cms';

import { onMounted, ref } from 'vue';

import { contentCategoryTree } from '#/api/cms';
import Navigation from '#/views/home/component/header/Navigation.vue';

import SchoolMenu from './SchoolMenu.vue';
import TopToolbar from './TopToolbar.vue';

const logoUrl = 'http://elsff.cn/images/logo.svg';
const treeData = ref<ContentCategoryTreeResult[]>([]);
const getContentCategoryTree = async () => {
  return await contentCategoryTree();
};
onMounted(async () => {
  treeData.value = await getContentCategoryTree();
});
</script>

<template>
  <div class="common-layout w-full" style="border: 2px dashed khaki">
    <el-row class="w-full" gutter="0" justify="space-between">
      <el-col
        :span="4"
        class="flex justify-center"
        style="align-items: center; padding-left: 30px"
      >
        <!--  左边 logo  -->
        <img :src="logoUrl" alt="logo" style="width: 235px; height: 65px" />
      </el-col>
      <el-col :span="2" class="" />
      <el-col :span="17" class="hidden-sm-and-down">
        <TopToolbar />
        <SchoolMenu :menu-data="treeData" />
      </el-col>
      <el-col :span="1">
        <Navigation />
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.common-layout {
  background: linear-gradient(
    to bottom,
    rgb(225 224 232),
    rgb(146 163 234 / 50%)
  );
}
</style>
